<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" width="800px" :close-on-click-modal="false" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-form-item label="客户名称" prop="name">
						<el-input v-model="form.name" placeholder="请输入客户名称" :disabled="num == 3"></el-input>
					</el-form-item>
<!--					<el-form-item label="客户类型" prop="type">-->
<!--						<el-select v-model="form.type" placeholder="请选择客户类型" style="width:100%;" :disabled="num == 3">-->
<!--							<el-option-->
<!--								v-for="item in options"-->
<!--								:key="item.index"-->
<!--								:label="item.name"-->
<!--								:value="item.name">-->
<!--							</el-option>-->
<!--						</el-select>-->
<!--					</el-form-item>-->
					<el-form-item label="联系人" prop="contacts">
						<el-input v-model="form.contacts" placeholder="请输入联系人" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="phone">
						<el-input v-model="form.phone" placeholder="请输入联系电话" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="公司地址" prop="location">
						<el-input v-model="form.location" placeholder="请输入公司地址" :disabled="num == 3"></el-input>
					</el-form-item>
					<el-form-item label="描述/备注" prop="desc">
						<el-input type="textarea" v-model="form.desc" placeholder="请输入描述/备注" :rows="5" :disabled="num == 3"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')" v-if="num != 3">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getHeader } from '@/app.config'
export default {
	name: 'addForm',
	data(){
		return {
			dialogFormVisible:false,
			form:{
				name:''
			},
			id:'',
			rules:{
				name: [
					{max: 36, message: '备注不能超过36个字符', trigger: 'blur'},
					{ required: true, message: '请输入组名', trigger: 'blur' }
				],
				contacts: [
					{max: 15, message: '联系人不能超过15个字符', trigger: 'blur'},
				],
				location: [
					{max: 50, message: '备注不能超过36个字符', trigger: 'blur'},
				],
				phone: [
					{max: 13, message: '联系电话不能超过13个字符', trigger: 'blur'},
				],
				desc: [
					{max: 200, message: '备注不能超过200个字符', trigger: 'blur'},
				]
			},
			options:[],
			num:0,
			title:'新增'
		}
	},
	created() {

	},
	methods:{
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
		},
		add(form){
			this.$refs[form].validate((valid) => {
				if (valid) {
					if(this.num == 1){
						var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/manufactor`;
						var data = this.form
						this.$axios.post(source,data,{headers: getHeader()})
							.then((response) => {
								if (response.status == 200) {
									this.dialogFormVisible = false
									this.form ={}
									this.$parent.initTable()
									this.$message.success("新增成功!")
								}
							}).catch((err) => {
							console.log(err);
						});
					}
					if(this.num == 2){
						var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/manufactor/${this.id}`;
						var data = this.form
						this.$axios.post(source,data,{headers: getHeader()})
							.then((response) => {
								if (response.status == 200) {
									this.dialogFormVisible = false
									this.form ={}
									this.$parent.initTable()
									this.$message.success("修改成功!")
								}
							}).catch((err) => {
							console.log(err);
						});
					}

				} else {
					return false;
				}
			});

		},
		initData(num,data){
			this.num = num

			var source = `${process.env.VUE_APP_KANBAN_HOST}/api/v1/manufactor/type`;
			this.$axios.get(source,{headers: getHeader()})
				.then((response) => {
					if (response.status == 200) {
						console.log(response.data.data)
						var res = response.data.data
						var arr = []
						res.forEach(item => {
							arr.push({name:item})
						})
						console.log(arr,121212)
						this.options = arr
					}
				}).catch((err) => {
				console.log(err);
			});

			if(num == 2){
				this.title="编辑"
				this.id = data.id
				this.form = Object.assign({},data)
			}
			if(num == 3){
				this.title="查看"
				this.id = data
				this.form = Object.assign({},data)
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
